<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
	
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- stylesheet -->
		<link href="css/literallycanvas.css" rel="stylesheet">
		<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
		<!-- dependency: React.js -->
		<script src="js/react-with-addons.js"></script>

		<!-- Literally Canvas -->
		<script src="js/literallycanvas.js"></script>

	</head>
	<body>
		<!-- where the widget goes. you can do CSS to it. -->
		<div class="literally images-in-drawing" style="height: 500px;"></div>
		<button  id="saveImg">
			ä¿å­å¾ç
		</button>
		<!-- kick it off -->
		<script>
		
			$(function() {
				var pic=pic||{};
				pic.contextPath='<%=request.getContextPath()%>';
				
				var lc = LC.init(document.getElementsByClassName('literally images-in-drawing')[0], {
					imageURLPrefix :"/img",
					/*imageSize :{
					 width: '700',
					 height: '900'
					 }*/
				});
				//var newImage = new Image()
				//newImage.src = '/temp/sample_image.png';
				/*lc.saveShape(LC.createShape('Image', {
				 x : 10,
				 y : 10,
				 image : newImage
				 }));*/
				
				$("#saveImg").click(function() {
					//alert(1);
					var newImage = lc.getImage();

					//console.info(newImage);
					//console.info(newImage.toDataURL());
					var newimg = new Image();
					newimg.src = newImage.toDataURL("image/png");
					window.open(lc.getImage().toDataURL());
					/*lc.saveShape(LC.createShape('Image', {
					 x : 10,
					 y : 10,
					 image : newImage
					 }));*/
					$.post("Base64Pic",{data:newImage.toDataURL();});
					 
				});

			});

		</script>
	</body>
</html>
